<template>
  <div class="works-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 空数据状态 -->
    <el-empty
      v-else-if="!worksList.length"
      description="暂无作品数据"
    >
    </el-empty>

    <!-- 数据列表 -->
    <el-row :gutter="20" v-else>
      <el-col :span="8" v-for="(item, index) in worksList" :key="item.mngName + index">
        <el-card :body-style="{ padding: '0px' }">
          <img 
            :src="item.mngUrl" 
            :onerror="defaultImg"
            class="image"
            @click="goToDetail(item)"
            style="cursor: pointer"
          >
          <div style="padding: 14px;">
            <h3 class="work-title" @click="goToDetail(item)">{{ item.mngName }}</h3>
            <div class="bottom">
              <p>{{ item.mngDesc }}</p>
              <span class="time">{{ item.createTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 分页 -->
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[9, 18, 27]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMngList } from '@/api/works'
import defaultWorkImg from '@/assets/work-default.png'

export default {
  name: 'WorksView',
  data() {
    return {
      worksList: [],
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 9
      },
      defaultImg: 'this.src="' + defaultWorkImg + '"',
      defaultList: [
        {
          mngName: '示例作品1',
          mngDesc: '这是一个示例作品描述',
          mngUrl: defaultWorkImg,
          createTime: '2024-01-20'
        },
        {
          mngName: '示例作品2',
          mngDesc: '这是一个示例作品描述',
          mngUrl: defaultWorkImg,
          createTime: '2024-01-19'
        },
        {
          mngName: '示例作品3',
          mngDesc: '这是一个示例作品描述',
          mngUrl: defaultWorkImg,
          createTime: '2024-01-18'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await getMngList(this.queryParams)
        if (res.code === 200) {
          this.worksList = res.rows
          this.total = res.total
        } else {
          this.worksList = this.defaultList
          this.total = this.defaultList.length
        }
      } catch (error) {
        console.error('获取作品列表失败:', error)
        this.worksList = this.defaultList
        this.total = this.defaultList.length
        this.$message.error('获取作品列表失败，显示默认数据')
      } finally {
        this.loading = false
      }
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    goToDetail(item) {
      this.$router.push({
        path: '/works/detail',
        query: {
          mngId: item.mngId,
          title: item.mngName
        }
      })
    }
  }
}
</script>

<style scoped>
.works-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.time {
  color: #909399;
  font-size: 13px;
}

.pagination-container {
  margin-top: 30px;
  text-align: center;
}

.loading-container {
  padding: 40px;
}

.work-title {
  cursor: pointer;
  &:hover {
    color: #409EFF;
  }
}
</style> 